<template>
    <div class="yktj">
        <h3>实时游客统计</h3>
        <p></p>
        <div class="txt">可预约总量 <span>99999</span> 人</div>
        <ul>
            <li v-for="(item, i) in arr" :key="i">{{ item }}</li>
        </ul>
        <div class="tjechart" ref="tjechart"></div>
    </div>
</template>

<script  lang="ts" setup>
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import { ref, onMounted } from 'vue'
const arr = ref<number | string[]>([2, 1, 5, 9, 0, 8, '人'])
const tjechart = ref()
onMounted(() => {
    getTjechart()
})
const getTjechart = () => {
    let myChart = echarts.init(tjechart.value);
    // 绘制图表
    myChart.setOption({
        series: [{
            type: 'liquidFill',
            data: [0.6, 0.5, 0.4, 0.3],
            center: ['50%', '50%'],
            radius: '90%',
            outline: {
                show: false
            }
        }]
    });
}
</script>
<script  lang="ts">
export default {
    name: 'Yktj'
}
</script>

<style lang="scss" scoped>
.yktj {
    flex: 1.5;
    background: url("../../images/dataScreen-main-lt.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    display: flex;
    flex-direction: column;

    h3 {
        font-size: 20px;
        line-height: 40px;
        padding-left: 10px;

    }

    .txt {
        text-align: right;

        span {
            color: #f2fc3a;
        }
    }

    p {
        height: 7px;
        width: 58px;
        background: url('../../images/dataScreen-title.png') no-repeat;
        background-size: 100% 100%;
        margin-left: 10px;
    }

    ul {
        display: flex;
        height: 50px;
        line-height: 50px;

        li {
            flex: 1;
            margin: 0 4px;
            background: url('../../images/total.png') no-repeat;
            background-size: 100% 100%;
            font-size: 20px;
            text-align: center;

        }
    }

    .tjechart {
        flex: 1;
    }

}
</style>